﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuimini/css/public.css" media="all">
</head>
<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">状态</label>
                                @*   <div class="layui-input-inline">
                                    <input type="text" name="workFlow_InstanceName" autocomplete="off" class="layui-input">
                                    </div>*@
                                <div class="layui-input-block">
                                    <select name="status" id="statusSelect"  lay-filter="statusSelect">
                                        <option value=""></option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                    @*<button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn " lay-event="delete"> 作废 </button>*@
                </div>
            </script>

            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

            <script type="text/html" id="currentTableBar">

                {{#  if(d.status == '审批中'){  }}
                    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">作废</a>
                    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
                {{#  }else{ }}
                     <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit layui-btn-disabled" >编辑</a>
                     <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete layui-btn-disabled" >作废</a>
                {{#  } }}
            </script>

        </div>
    </div>
    <script src="/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        var table;
        //刷新数据表格
        function reloadTable(){
            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                }
            }, 'data');
        }

        layui.use(['form', 'table'], function () {
            var $ = layui.jquery;
            var form = layui.form;
            table = layui.table;

            //发起异步请求，获取搜索栏的下拉选
            $.ajax({
                url:'/WorkFlow_Instance/GetStatusOptions',
                type:'get',
                data:{},
                success:function(res){
                     if(res.isSuccess){
                            //把工作流模板备选数据放到下拉选标签元素中
                            for(var i=0;i<res.data.length;i++){
                                 //获取下拉选标签元素,并添加option
                                 $("#statusSelect").append('<option value="'+ res.data[i].value +'">'+ res.data[i].name +'</option>');
                            }

                            //刷新select选择框渲染
                            form.render('select');
                      }
                }
            });

            //下拉选点击事件
            form.on('select(statusSelect)', function(data){
              console.log(data.elem); //得到select原始DOM对象
              console.log(data.value); //得到被选中的值
              console.log(data.othis); //得到美化后的DOM对象
                //执行搜索重载
                table.reload('currentTableId', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        status:data.value
                    }
                }, 'data');
            }); 

            //渲染table并且获取实例
            tableIns = table.render({
                elem: '#currentTableId',
                url: '/WorkFlow_Instance/GetWorkFlow_Instances',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                cols: [[
                    { type: "checkbox", width: 50 },
                    { field: 'id', title: 'ID', hide: true, sort: true },
                    { field: 'title', minWidth: 80, title: '房间Id' },
                    { field: 'status', minWidth: 150, title: '状态', sort: true },
                    { field: 'RoomName', minWidth: 80, title: '房间名称' },
                    { field: 'RoomTypeId', minWidth: 80, title: '房间类别' },
                    { field: 'Amount', minWidth: 80, title: '金额' },
                    { field: 'CheckInDate', minWidth: 80, title: '入住日期' },
                    { field: 'CheckOutDate', minWidth: 80, title: '退房日期' },
                    { field: 'userName', minWidth: 80, title: '创建人' },
                    { title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center" }
                ]],
                limits: [5, 10, 15, 20, 25, 50],
                limit: 5,
                page: true,
                skin: 'line'
            });


            // 监听搜索操作
            form.on('submit(data-search-btn)', function (data) {
                //var result = JSON.stringify(data.field);
                //layer.alert(result, {
                //    title: '最终的搜索信息'
                //});

                //执行搜索重载
               //执行搜索重载
                table.reload('currentTableId', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        status:data.field.status
                    }
                }, 'data');

                return false;
            });

            /**
             * toolbar监听事件
             */
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'add') {  // 监听添加操作
                    var index = layer.open({
                        title: '添加工作流实例',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/WorkFlow_Instance/CreateWorkFlow_InstanceView',
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                } else if (obj.event === 'delete') {  // 监听删除操作
                    var checkStatus = table.checkStatus('currentTableId');
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    console.log(data);

                    //获取要删除的工作流实例id组成一个数组
                    var ids = [];
                    for (var i = 0; i < data.length; i++) {
                        ids.push(data[i].id);
                    }

                    //发送异步请求批量删除
                    $.ajax({
                        url: '/WorkFlow_Instance/BatchDeleteWorkFlow_Instance',
                        type: 'post',
                        data: {
                            ids: ids
                        },
                        success: function (res) {
                            if (res.isSuccess) {
                                //执行搜索重载
                                table.reload('currentTableId', {
                                    page: {
                                        curr: 1
                                    }
                                    , where: {
                                    }
                                }, 'data');
                            }
                            layer.msg(res.msg);
                        }
                    });
                }
            });

            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
                console.log(obj)
            });

            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                console.log(data);

                if (obj.event === 'edit') {

                    var index = layer.open({
                        title: '编辑工作流实例',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '/WorkFlow_Instance/UpdateWorkFlow_InstanceView?id=' + data.id,
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                } else if (obj.event === 'delete') {


                    layer.confirm('真的删除行么', function (index) {

                        //发起异步请求删除工作流实例信息
                        $.ajax({
                            url: '/WorkFlow_Instance/DeleteWorkFlow_Instance',
                            type: 'post',
                            data: {
                                id: data.id
                            },
                            success: function (res) {
                                if (res.isSuccess) {
                                    //obj.del();
                                    //刷新数据表格
                                    reloadTable();
                                }
                                layer.msg(res.msg);
                                layer.close(index);
                            }
                        });

                    });
                }
            });

        });
    </script>

</body>
</html>